<template>
    <div class="RecordDetails pb-12">
        <fx-header>
            <template #title>{{ title }}{{ $t('详情') }}</template>
        </fx-header>
        <div class="quantity mt-8">{{ $t('金额') }}</div>
        <div class="money mt-8" v-if="type == 0">
            <span>{{ payInfo.amount }}</span> {{ payInfo.currency }}
        </div>
        <div class="money mt-8" v-else>
            <span>{{ payInfo.volume }}</span> {{ payInfo.coin }}
        </div>
        <div class="status flex mt-9" v-if="type == 0">
            <div class="status-icon status-bg3" v-if="payInfo.state == 0"></div>
            <div class="status-icon status-bg1" v-if="payInfo.state == 3"></div>
            <div class="status-icon status-bg4" v-if="payInfo.state == 4"></div>
            <template v-if="payInfo.state == 0">
                <div class="status-icon status-icon-color3 mr-2"></div>
                {{ $t('confirming') }}
            </template>
            <template v-if="payInfo.state == 3">
                <div class="status-icon status-icon-color1 mr-2"></div>
                {{ $t('success') }}
            </template>
            <template v-if="payInfo.state == 4">
                <div class="status-icon status-icon-color2 mr-2"></div>
                {{ $t('Cancelled') }}
            </template>
        </div>
        <div class="status flex mt-9" v-else>
            <div class="status-icon status-bg3" v-if="payInfo.state == 0"></div>
            <div class="status-icon status-bg1" v-if="payInfo.state == 1"></div>
            <div class="status-icon status-bg4" v-if="payInfo.state == 2"></div>
            <template v-if="payInfo.state == 0">
                <div class="status-icon status-icon-color3 mr-2"></div>
                {{ $t('confirming') }}
            </template>
            <template v-if="payInfo.state == 1">
                <div class="status-icon status-icon-color1 mr-2"></div>
                {{ $t('success') }}
            </template>
            <template v-if="payInfo.state == 2">
                <div class="status-icon status-icon-color2 mr-2"></div>
                {{ $t('fail') }}
            </template>
        </div>
        <div class="text mt-3" v-if="type == 0">
            <span v-if="payInfo.state == 0">{{ type == 0 ? payInfo.currency :
                payInfo.coin }}{{ title }}{{ $t('processing') }}...</span>
            <span v-if="payInfo.state == 3">{{ type == 0 ? payInfo.currency :
                payInfo.coin }}{{ $t('already') }}{{ title }}{{ $t('checkTheDetails') }}</span>
            <span v-if="payInfo.state == 4">{{ type == 0 ? payInfo.currency :
                payInfo.coin }}{{ title }}{{ $t('Cancelled') }}，{{ $t('contactPlatform') }} </span>
        </div>
        <div class="text mt-3" v-else>
            <span v-if="payInfo.state == 0">{{ type == 0 ? payInfo.currency :
                payInfo.coin }}{{ title }}{{ $t('processing') }}...</span>
            <span v-if="payInfo.state == 1">{{ type == 0 ? payInfo.currency :
                payInfo.coin }}{{ $t('already') }}{{ title }}{{ $t('checkTheDetails') }}</span>
            <span v-if="payInfo.state == 2">{{ type == 0 ? payInfo.currency :
                payInfo.coin }}{{ title }}{{ $t('Cancelled') }}，{{ $t('contactPlatform') }} </span>
        </div>
        <ul class="px-4" v-if="type == 0">
            <!-- <li class="flex mt-10 justify-between">
                <div class="ash">确认数</div>
                <div>12/12</div>
            </li> -->
            <li class="flex mt-10 justify-between">
                <div class="ash">{{ title }}{{ $t('account') }}</div>
                <div>{{ payInfo.paramName1 }}</div>
            </li>

            <li class="flex mt-10 justify-between">
                <div class="ash">{{ $t('type') }}</div>
                <div>{{ title }}</div>
            </li>
            <li class="flex mt-10 justify-between">
                <div class="ash"> {{ $t('BankAccount') }}</div>
                <div>{{ payInfo.paramValue1 }}</div>
            </li>
            <li class="flex mt-10 justify-between">
                <div class="ash">{{ $t('bankTitle') }}</div>
                <div>{{ payInfo.paramValue2 }}</div>
            </li>
            <li class="flex mt-10 justify-between">
                <div class="ash">{{ $t('orderNumber') }}</div>
                <div>{{ payInfo.orderNo }}</div>
            </li>
            <li class="flex mt-10 justify-between">
                <div class="ash">{{ $t('date') }}</div>
                <div>{{ payInfo.createTime ? dayjs(payInfo.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</div>
            </li>
            <li class="flex mt-10 justify-between">
                <div class="ash">{{ $t('Remarks') }}</div>
                <div>{{ payInfo.failure_msg }}</div>
            </li>
        </ul>
        <ul class="px-4" v-else>
            <li class="flex mt-10 justify-between">
                <div class="ash">{{ $t('TheInternet') }}</div>
                <div>{{ payInfo.coin_blockchain }}</div>
            </li>
            <li class="flex mt-10 justify-between">
                <div class="ash">{{ $t('free') }}</div>
                <div>{{ payInfo.fee }}</div>
            </li>
            <li class="flex mt-10 justify-between">
                <div class="ash">{{ isCZ == 0 ? $t('paymentAddress') : $t('paymentReceivingAddressMethod') }}</div>
                <div class="flex">
                    <div class="address" v-if="payInfo.from || payInfo.to">{{ isCZ == 0 ? payInfo.from : payInfo.to }}
                    </div>
                    <div v-else>--</div>
                    <span class="copy" @click="copy(isCZ == 0 ? payInfo.from : payInfo.to)"
                        v-if="payInfo.from || payInfo.to"></span>

                </div>
            </li>
            <li class="flex mt-10 justify-between">
                <div class="ash">{{ $t('hash') }}</div>
                <div>{{ payInfo.tx ? payInfo.tx : '--' }}<span class="copy" v-if="payInfo.tx"
                        @click="copy(payInfo.tx)"></span></div>
            </li>
            <li class="flex mt-10 justify-between">
                <div class="ash">{{ $t('date') }}</div>
                <div>{{ payInfo.create_time }}</div>
            </li>
            <li class="flex mt-10 justify-between">
                <div class="ash">{{ $t('orderNumber') }}</div>
                <div>{{ payInfo.order_no }}</div>
            </li>
            <li class="flex mt-10 justify-between">
                <div class="ash">{{ $t('Remarks') }}</div>
                <div>{{ payInfo.failure_msg }}</div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { onBeforeMount, ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getc2cOrder, _getRechargeBlockchain, _getWithdraw } from "@/service/recharge.api.js";
import useClipboard from "vue-clipboard3";
import { showToast } from 'vant'
import { useI18n } from "vue-i18n";
import dayjs from 'dayjs';
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const { toClipboard } = useClipboard();
const type = ref(0)
const orderNo = ref(null)
const payInfo = ref({})
const isCZ = ref(0)
const title = ref('充值')
const copy = async (val) => {
    console.log(val)
    try {
        await toClipboard(val);
        showToast(t('copySuccess'));
    } catch (e) {
        console.error(e);
    }
}
onMounted(async () => {
    console.log(route.query)
    type.value = route.query.type
    isCZ.value = route.query.isCZ
    orderNo.value = route.query.orderNo
    if (type.value == 0) {
        getc2cOrderDetails(orderNo.value)
    } else {
        if (isCZ.value == 0) {
            getRechargeBlockchain(orderNo.value)
            title.value = t('recharge')
        } else {
            getWithdraw(orderNo.value)
            title.value = t('withdraw')
        }
    }
})
//银行卡订单详情
const getc2cOrderDetails = (orderNo) => {
    getc2cOrder({ order_no: orderNo }).then((res) => {
        payInfo.value = res
        console.log(payInfo.value)
        title.value = payInfo.value.direction == 'recharge' ? t('recharge') : t('withdraw')
    })

}
//数字货币充值
const getRechargeBlockchain = (orderNo) => {
    _getRechargeBlockchain({ order_no: orderNo }).then((res) => {
        payInfo.value = res
    })

}
//数字货币提现
const getWithdraw = (orderNo) => {
    _getWithdraw({ order_no: orderNo }).then((res) => {
        payInfo.value = res
    })

}
</script>
<style lang="scss" scoped>
.RecordDetails {
    font-size: 14px;

    .quantity {
        color: $text_color1;
        text-align: center;
    }

    .money {
        font-size: 26px;
        text-align: center;

        span {
            font-weight: bold;
        }
    }

    .status {
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: $text_color1;

        .status-icon {
            width: 20px;
            height: 20px;
        }
    }

    .text {
        text-align: center;
        font-size: 14px;
        color: $text_color1;
    }

    .status-bg1 {
        background: url('@/assets/image/Record/icon1.png') no-repeat center;
        background-size: 100% 100%;
    }

    .status-bg2 {
        background: url('@/assets/image/Record/icon2.png') no-repeat center;
        background-size: 100% 100%;
    }

    .status-bg3 {
        background: url('@/assets/image/Record/icon3.png') no-repeat center;
        background-size: 100% 100%;
    }

    .status-bg4 {
        background: url('@/assets/image/Record/icon4.png') no-repeat center;
        background-size: 100% 100%;
    }

    ul {
        li {
            .address {
                max-width: 200px;
                word-break: break-all;
                word-wrap: break-word;
                padding-right: 10px;
            }

            .copy {
                display: block;
                width: 13px;
                height: 15px;
                background: url('@/assets/image/order/copy.png') no-repeat center;
                background-size: 100% 100%;
                margin-top: 4px;
            }
        }
    }

    .ash {
        color: $dark-grey;
    }
}
</style>